<template>
  <!-- 充值卡详情 -->
  <el-drawer
    title="月结详情"
    :visible.sync="visible"
    min-width="1024px"
    class="cradInfo"
    append-to-body
    @close="reset"
  >
    <div class="item">
      <el-tabs v-model="activeName" style="min-height: 100px;" @tab-click="tabsClick">
        <el-tab-pane lazy label="月结信息" name="detail">
          <el-descriptions size="medium">
            <el-descriptions-item label="客户编号">{{ csmInfo.csmCode }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ csmInfo.csmName }}</el-descriptions-item>
            <el-descriptions-item label="客户手机号">{{ csmInfo.csmRgPhone }}</el-descriptions-item>
            <el-descriptions-item label="月结额度">{{ csmInfo.decimalSpare2 }}</el-descriptions-item>
            <el-descriptions-item label="剩余额度">{{ csmInfo.decimalSpare3 }}</el-descriptions-item>
            <el-descriptions-item label="开通日期">{{ csmInfo.createTime ? parseTime(csmInfo.createTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
            <el-descriptions-item label="累计消费">{{ csmInfo.totalPayMoney }}</el-descriptions-item>
            <el-descriptions-item label="消费次数">{{ csmInfo.totalPayCount }}</el-descriptions-item>
            <el-descriptions-item label="最后交易时间">{{ csmInfo.lastPayTime ? parseTime(csmInfo.lastPayTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
            <el-descriptions-item label="累计销单">{{ csmInfo.totalReturnMoney }}</el-descriptions-item>
            <el-descriptions-item label="累计差额减免">{{ csmInfo.totalBadMoney }}</el-descriptions-item>
            <el-descriptions-item label="使用门店">{{ csmInfo.useOrgName }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane lazy label="交易明细" name="info">
          <div class="head">
            <el-table-form ref="form">
              <el-form-item label="交易日期:" :table-form-merge="2">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  unlink-panels
                />
              </el-form-item>
              <el-form-item label="交易类型:">
                <el-select v-model="query.optFlag" clearable>
                  <el-option
                    v-for="i in dealMap"
                    :key="i.value"
                    :label="i.desc"
                    :value="i.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="使用门店:">
                <el-tree-select
                  v-model="query.useOrgId"
                  clearable
                  class="orgIdSelect"
                  :popover-width="360"
                  :select-params="{
                    clearable: false,
                    placeholder: '请选择使用门店',
                  }"
                  :tree-params=" {
                    'expand-on-click-node': false,
                    'highlight-current': true,
                    props:{
                      value:'orgId',
                      label: 'orgName',
                      disabled: 'disabled',
                    },
                    data: treeData
                  }"
                />
              </el-form-item>
              <template v-slot:btns>
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              </template>
            </el-table-form>
            <el-popover
              placement="left"
              width="400"
              trigger="hover"
            >
              <div
                style="display: flex; gap: 16px; flex-direction: column;"
              >
                <div>
                  <div class="desc-title">作用</div>
                  <div>统计时间段周期该用户月结的交易明细</div>
                </div>
                <div>
                  <div class="desc-title">个别字段释义</div>
                  <div class="desc-row">
                    <span class="blue">【交易类型】</span>
                    <span>:</span>
                    <p>
                      <span>（1）退残充值：当进行退残业务时,对于月结来说,审核通过是进账,用本次交易负数表示;反审核是支出,用本次交易正数表示；</span>
                    </p>
                  </div>
                  <div class="desc-row">
                    <span class="blue">【使用门店】</span>
                    <span>:</span>
                    <p>
                      <span>充值卡设置的使用门店</span>
                    </p>
                  </div>
                  <div class="desc-row">
                    <span class="blue">【关联单号】</span>
                    <span>:</span>
                    <p>
                      <span>交易类型为消费时，关联单号为订单查询中对应的订单号；</span>
                      <span>交易类型为退款时，关联单号为订单查询中对应的订单号；</span>
                      <span>交易类型为退残充值时，关联单号为回收单中对应的单据号；</span>
                    </p>
                  </div>
                </div>
              </div>
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </div>

          <!-- height="300"  -->
          <iframe :src="iframeUrl" width="100%" height="300" frameborder="0" scrolling="auto" />
        </el-tab-pane>
        <el-tab-pane lazy label="卡日志" name="cradLog">
          <lb-table
            ref="lbTable"
            v-loading="$loadingPlugin.fetchData"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="column"
            :data="tableData.data"
            pagination
            :immediate-fetch="false"
            :total="tableData.total"
            custom-column
            @fetch="fetchData"
            @expand-change="clickExpand"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">关闭</el-button>
    </div>
  </el-drawer>
</template>

<script>
  import { transactionReportAccCsmmonthlybill, queryMonthlyRemindLog } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { queryMap } from '@/api'

  export default {
    name: 'crad-info',
    components: {
    },
    props: {
      dealMap: {
        type: Array,
        required: true
      },
      treeData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        expandData: {},
        parseTime,
        visible: false,
        activeName: 'detail',
        iframeUrl: null,
        date: [],
        query: {
          optFlag: '',
          useOrgId: ''
        },
        csmInfo: {},
        statusMap: {}, // 状态枚举
        tableData: {
          total: 0,
          data: []
        },
        cradList: [
        ],
        // 充值
        cols1: [
          {
            prop: 'feeCount1',
            label: '本次充值金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '本次充值赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '本次充值前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '本次充值后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '充值备注'
          }
        ],
        // 消费
        cols2: [
          {
            prop: 'feeCount1',
            label: '本次消费金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '本次消费赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '本次消费前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '本次消费后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '消费备注'
          }
        ],
        // 销卡
        cols3: [
          {
            prop: 'feeCount1',
            label: '销卡退款金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount3',
            label: '销卡前卡余额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '销卡后卡金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '销卡退款备注'
          }
        ],
        // 换卡
        cols5: [
          // {
          //   prop: 'feeCount',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.feeCount && this.numberFormat1(row.feeCount) }</span>
          // },
          // {
          //   prop: 'sendCount3',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.sendCount3 && this.numberFormat1(row.sendCount3) }</span>
          // },
          // {
          //   prop: 'cashCount3',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.cashCount3 && this.numberFormat1(row.cashCount3) }</span>
          // },
          // {
          //   prop: 'feeCount4',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          // },
          {
            prop: 'remark',
            label: '换卡'
          }
        ],
        // 充值调账
        cols13: [
          {
            prop: 'feeCount1',
            label: '充值调账现金金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '充值调账赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '充值调账前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '充值调账后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '充值调账备注'
          }
        ],
        // 消费调账
        cols14: [
          {
            prop: 'feeCount1',
            label: '消费调账现金金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '消费调账赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '消费调账前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '消费调账后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '消费调账备注'
          }
        ],
        // 退款
        cols16: [
          {
            prop: 'feeCount',
            label: '退款',
            render: (h, { row }) => <span>{ row.feeCount && this.numberFormat1(row.feeCount) }</span>
          },
          {
            prop: 'sendCount3',
            label: '退款',
            render: (h, { row }) => <span>{ row.sendCount3 && this.numberFormat1(row.sendCount3) }</span>
          },
          {
            prop: 'cashCount3',
            label: '退款',
            render: (h, { row }) => <span>{ row.cashCount3 && this.numberFormat1(row.cashCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '退款',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '退款'
          }
        ]
      }
    },
    computed: {
      column: function() {
        return [
          {
            type: 'expand',
            render: (h, { row }) => {
              return (
                  <div class='expand-content'>
                    {this.expandData && (
                     <div class='font-weight title'>{this.expandData[row.recordId].title}</div>
                    )}
                    {row.optFlag === 1 &&
                    <ul style='padding: 0px'>
                    <li class='liItem'>月结授信额度：{row.feeCount5}元</li>
                    <li class='liItem'>备注：{row.remark}</li>
                  </ul>}
                   {row.optFlag === 2 &&
                    <ul style='padding: 0px'>
                    <li class='liItem'>本次消费金额：{row.feeCount}元</li>
                    <li class='liItem'>消费前可用额度：{row.feeCount2}元</li>
                    <li class='liItem'>消费后可用额度：{row.feeCount3}元</li>
                    <li class='liItem'>备注：{row.remark}</li>
                  </ul>}
                     {row.optFlag === 3 &&
                    <ul style='padding: 0px'>
                    <li class='liItem'>本次销单金额：{row.feeCount}元</li>
                    <li class='liItem'>差额减免金额：{row.feeCount1}元</li>
                    <li class='liItem'>销单前可用额度：{row.feeCount2}元</li>
                    <li class='liItem'>销单后可用额度：{row.feeCount3}元</li>
                    <li class='liItem'>备注：{row.remark}</li>
                  </ul>}
                   {row.optFlag === 4 &&
                    <ul style='padding: 0px'>
                      <li class='liItem'>退款金额：{row.feeCount}元</li>
                      <li class='liItem'>退款前可用额度：{row.feeCount2}元</li>
                      <li class='liItem'>退款后可用额度：{row.feeCount3}元</li>
                      <li class='liItem'>备注：{row.remark}</li>
                    </ul>}
                     {row.optFlag === 5 &&
                    <ul style='padding: 0px'>
                      <li class='liItem'>修改前额度：{row.feeCount4}元</li>
                      <li class='liItem'>修改前可用额度：{row.feeCount2}元</li>
                      <li class='liItem'>修改后额度：{row.feeCount5}元</li>
                      <li class='liItem'>修改后可用额度：{row.feeCount3}元</li>
                      <li class='liItem'>备注：{row.remark}</li>
                    </ul>}
                    {row.optFlag === 6 &&
                  <ul style='padding: 0px'>
                      <li class='liItem'>关闭前额度：{row.feeCount4}元</li>
                      <li class='liItem'>关闭后额度：{row.feeCount3}元</li>
                      <li class='liItem'>消费备注：{row.remark}</li>
                    </ul>}
                       {row.optFlag === 7 &&
                  <ul style='padding: 0px'>
                    <li class='liItem'>手机号变更备注：{row.remark}</li>
                  </ul>}
                  {row.optFlag === 8 &&
                  <ul style='padding: 0px'>
                    <li class='liItem'>本次充值金额：{row.feeCount}元</li>
                    <li class='liItem'>本次充值赠送金额：{row.feeCount1}元</li>
                    <li class='liItem'>本次充值前金额：{row.feeCount2}元</li>
                    <li class='liItem'>本次充值后金额：{row.feeCount3}元</li>
                    <li class='liItem'>备注：{row.remark}</li>
                  </ul>}
              </div>
                )
            }
          },
          {
            prop: 'createTime',
            label: '时间',
            render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
          },
          {
            prop: 'optFlag',
            label: '类型',
            render: (h, { row }) => <span>{ row.optFlag && formatColumnMap(this.cradList, 'value', row.optFlag, 'desc') }</span>
          },
          {
            prop: 'operatorName',
            label: '操作员'
          },
          {
            prop: 'orgName',
            label: '操作机构'
          }
        ]
      }
    },
    created() {},
    methods: {
      async open(temp) {
        const [res1] = await Promise.all([mergeAsyncFunc(queryMap, { enumName: 'AccCsmMonthlyRecordOptFlag' })])
        this.cradList = res1.data
        return new Promise(resolve => {
          if (temp) {
            this.csmInfo = temp
            this.resolve = resolve
            this.visible = true
          }
        })
      },
      // 展开行
      async clickExpand(row, expandedRows) {
        if (expandedRows.length > 0) {
          const item = expandedRows.find(item => item.recordId === row.recordId)
          if (item) {
            const obj = {}
            switch (item.optFlag) {
            case 1:
              obj.title = '开通月结'
              break
            case 2:
              obj.title = '订单消费'
              break
            case 3:
              obj.title = '账款销单'
              break
            case 4:
              obj.title = '订单退款'
              break
            case 5:
              obj.title = '修改额度'
              break
            case 6:
              obj.title = '关闭月结'
              break
            case 7:
              obj.title = '月结用户手机号变更'
              break
            case 8:
              obj.title = '退残充值'
              break
            }
            this.$set(this.expandData, item.recordId, [])
            this.$set(this.expandData[item.recordId], 'title', obj.title)
          }
        }
      },
      tabsClick(val) {
        if (val.paneName === 'cradLog') {
          this.$nextTick(() => {
            this.$refs.lbTable.fetch()
          })
        }
        if (val.paneName === 'info') {
          this.search()
        }
      },
      // 查询
      async search() {
        const params = {
          ...this.query,
          csmId: this.csmInfo.csmId
        }
        if (this.date && this.date.length === 2) {
          params.startTime = parseTime(this.date[0], '{y}-{m}-{d} {h}:{i}:{s}')
          params.endTime = parseTime(this.date[1], '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          params.startTime = ''
          params.endTime = ''
        }
        if (!this.query.optFlag) {
          // params.optFlag = this.cradList.map(l => l.value).join(',')
          params.optFlag = ''
        }
        const res = await transactionReportAccCsmmonthlybill(params)
        this.iframeUrl = res.data
      },
      reset() {
        this.csmInfo = {}
        this.date = []
        this.tableData = {
          total: 0,
          data: []
        }
        this.activeName = 'detail'
        this.query = {
          optFlag: ''
        }
        this.visible = false
      },
      async fetchData({ currentPage, pageSize }) {
        const res = await queryMonthlyRemindLog({
          param: this.csmInfo.csmId,
          pageIndex: currentPage,
          pageSize
        })
        res.data.rows.map(item => {
          return item.detailList = [item]
        })
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 充值金额
      numberFormat1: function(val) {
        val = val * 1.00 / 100
        val = Number(val)
        val = isNaN(val) ? '0.00' : val.toFixed(2)
        return val + '元'
      }
    }
  }
</script>

<style lang="scss" scoped>
.cradInfo {
  /deep/.el-drawer {
    width: 68% !important;
    padding: 15px 20px;
  }
}
.item {
  margin-bottom: 10px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
/deep/.expand-content {
  padding: 8px 20px;
  .title {
    margin-bottom: 6px;
  }
  .liItem {
    line-height: 30px;
  }
}

.head {
  position: relative;
  padding-right: 20px;
  .el-icon-question {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
  }
}

.blue {
  min-width: 86px;
  color: #1A23DD;
}
.desc-title {
  margin-bottom: 5px;
  font-weight: 600;
}
.desc-row {
  display: flex;
  margin-bottom: 5px;
  span {
    display: block;
  }
}
</style>
